<template>
  <div class="map-container">
    <div class="map-content">
      <!-- Loading 指示器 -->
      <div v-if="loading" class="loading-overlay">加载中...</div>
      <div id="map"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
import "ol/ol.css";
import { defaults as defaultInteractions } from "ol/interaction";
import { Map, View } from "ol";
import { DoubleClickZoom } from "ol/interaction";

import { districtLayer, img_wLayer, vectorLayer, addDoubleClickListener } from "./config/config.js";
import { densityLayer, vectorSource, addTipForShangcheng } from "./config/density.js";
let map = null;
const loading = ref(false);
onMounted(async () => {
  loading.value = true;
  // 创建地图实例 图层顺序很重要！！！！！！！！！
  map = new Map({
    target: "map", // 将地图渲染到容器中
    interactions: defaultInteractions()
      .getArray()
      .filter((interaction) => !(interaction instanceof DoubleClickZoom)), // 明确移除 DoubleClickZoom
    layers: [img_wLayer, districtLayer, densityLayer, vectorLayer],
    view: new View({
      center: [120.5825, 30.0024], // 默认中心点（杭州的坐标）
      zoom: 7,
      projection: "EPSG:4326",
    }),
  });
  // // 手动更新地图大小
  // map.updateSize();
  // 调用方法
  addTipForShangcheng(map, vectorSource);
  //缩放核心代码
  map.on("moveend", () => {
    const zoom = map.getView().getZoom();
    if (zoom < 11) {
      showDistrictNames(map);
    }
  });

  densityLayer.setVisible(false);
  // 在初始化地图时调用
  addDoubleClickListener(map);

  // 当地图加载完成时，隐藏 loading
  map.on("rendercomplete", () => {
    loading.value = false; // 地图渲染完成后，隐藏 loading
  });
});

const showDistrictNames = (map) => {
  const zoom = map.getView().getZoom();
  districtLayer
    .getSource()
    .getFeatures()
    .forEach((feature) => {
      const linanCenter = [119.724733, 30.233873]; // 临安的中心点坐标
      if (zoom >= 8) {
        // 平滑移动到临安中心点
        // map.getView().animate({
        //   center: linanCenter,
        //   duration: 1000, // 动画持续时间（毫秒）
        // });
        densityLayer.setVisible(true);
        districtLayer.setVisible(true); // 在特定 zoom 层级显示区名称
      } else {
        districtLayer.setVisible(false); // 隐藏
        densityLayer.setVisible(false);
      }
    });
};
onBeforeUnmount(() => {
  if (map) {
    map.setTarget(null); // 销毁地图实例
  }
});
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  .map-content {
    z-index: 0;
    #map {
      height: 90vh;
      z-index: 1;
      border: none;
      cursor: move;
      background: #000;
    }
  }

  .map-tool {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10; /* 保证工具栏的按钮在地图上层 */
  }

  .map-tool-item {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin: 0;
    transition: background-color 0.3s;
    &:hover {
      background-color: #0056b3;
    }
  }

  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
    z-index: 99; /* 保证 loading 层在地图上层 */
  }
}
</style>
